<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html">
<h:head>
	<meta charset="utf-8" />
	<title>#{messages.appTitle}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Gestión Neonatal" />
	<meta name="author" content="Jorge E. Villaverde" />

	<h:outputStylesheet name="bootstrap.css" library="css" />
	<style type="text/css">
		body {
			padding-top: 60px;
			padding-bottom: 40px;
		}
	</style>
	<h:outputStylesheet name="bootstrap-responsive.css" library="css" />

	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]-->

	<!-- Le fav and touch icons -->
	<link rel="shortcut icon" href="resources/ico/favicon.ico" />
</h:head>
<h:body>
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> </a> <a
					class="brand" href="#">#{messages.appName}</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li class="active"><a href="#">#{messages.homeText}</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#contact">#{messages.footerContacto}</a></li>
					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container">

		<!-- Main hero unit for a primary marketing message or call to action -->
		<div class="hero-unit">
			<h1>#{messages.wellcomeTitleMessage}</h1>
			<p>#{messages.wellcomeDescripcionMessage}</p>
		</div>
		<div class="row">
			<div class="span12">
 		<h:form styleClass="well">
			<label>#{messages.username}</label>
			<h:inputText name="username" id="username" value="#{createUserBean.username}"  autocomplete="off" />
			<label>#{messages.password}</label>
			<h:inputSecret name="password" id="password" value="#{createUserBean.password}" autocomplete="off" />

			<label>#{messages.loginPasswordRetry}</label>
			<h:inputSecret name="passwordRetry" id="passwordRetry" value="#{createUserBean.passwordRetry}" autocomplete="off" />

			<div class="form-actions">
				<h:commandButton value="#{messages.userCreateSubmit}"
					styleClass="btn" action="#{createUserBean.createUser}"  />
			</div>
		</h:form>			
			</div>
		</div>

		<hr />

		<footer>
			<p>#{messages.footerText}</p>
		</footer>

	</div>
	<!-- /container -->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<h:outputScript library="js" value="jquery.js" target="head"/>
	<h:outputScript library="js" value="bootstrap-transition.js" />
	<h:outputScript library="js" value="bootstrap-alert.js" />
	<h:outputScript library="js" value="bootstrap-modal.js" />
	<h:outputScript library="js" value="bootstrap-dropdown.js" />
	<h:outputScript library="js" value="bootstrap-scrollspy.js" />
	<h:outputScript library="js" value="bootstrap-tab.js" />
	<h:outputScript library="js" value="bootstrap-tooltip.js" />
	<h:outputScript library="js" value="bootstrap-popover.js" />
	<h:outputScript library="js" value="bootstrap-button.js" />
	<h:outputScript library="js" value="bootstrap-collapse.js" />
	<h:outputScript library="js" value="bootstrap-carousel.js" />
	<h:outputScript library="js" value="bootstrap-typeahead.js" />
	
</h:body>
</html>